<template>
  <div>
    <div class="head">
      <el-form inline :model="selectdata"
               label-width="150px"
               size="small"
      >


        <el-form-item>
          <el-input v-model="selectdata.nickname" @keyup.enter.native="search"
                    placeholder="请输入用户昵称">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-delete" type="danger" @click="clearForm">重置</el-button>
          <el-button plain type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        </el-form-item>
      </el-form>


    </div>


    <div>
      <!-- 表 -->
      <el-table :data="tableData" border v-loading="loading">
        <el-table-column label="用户ID" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>


        <el-table-column label="用户昵称" align="center">
          <template slot-scope="scope">{{ scope.row.nickname }}</template>
        </el-table-column>


        <el-table-column label="头像" align="center" prop="avatar">
          <template slot-scope="scope">
            <el-image :src="scope.row.avatar" v-if="scope.row.avatar" class="img-wrap"
                      style="height: 50px;width: 100%"
                      :preview-src-list="scope.row.avatar |toArray"></el-image>
          </template>
        </el-table-column>


        <el-table-column label="openId" align="center">
          <template slot-scope="scope">{{ scope.row.openId }}</template>
        </el-table-column>

        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status===1" style="color: green">
              正常
            </span>
            <span v-if="scope.row.status===2">
              已注销
            </span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">

            <el-button plain size="mini" type="warning"
                       @click="updateStatus(scope.row.id)">注销
            </el-button>
          </template>
        </el-table-column>


      </el-table>
      <div class="page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import moment from 'moment'
import {admin_user_list, update_user_status} from "../../api/user";

export default {
  name: "sys_user",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      dateRange: [],
      loading: false,
      formInline: {},
      selectdata: {
        userId: "",
        nickname: "",

      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    updateStatus(id) {
      this.$confirm("是否注销改用户?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(res => {
        let params = {}
        params.userId = id
        update_user_status(params).then(res => {
          this.$message.success("注销成功")
        })
      })

    },
    /**
     * 重置搜索
     */
    clearForm() {
      this.selectdata = {};
      this.getData();
    },

    /**
     * 搜索
     */
    search() {
      this.currentPage = 1;
      this.getData()
    },


    /**
     * 获取数据
     */
    getData() {
      let params = {};
      this.loading = true;
      params.userId = this.selectdata.userId;
      params.nickname = this.selectdata.nickname;
      params.pageSize = this.pageSize;
      params.pageNumber = this.currentPage;
      admin_user_list(params).then(res => {
        if (res.status === 200) {
          this.loading = false;
          this.total = Number.parseInt(res.data.total);
          this.tableData = res.data.list;
        }

      })
    },
    /**
     * 改变每页大小
     */
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    /**
     * 改变当前页
     */
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getData();
    },
  },
  filters: {
    filterCtime(ctime) {
      // 过滤时间
      if (ctime) {
        return moment(ctime).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return '暂无数据'
      }
    },
    filterShow(show) {
      if (show === 1) {
        return '显示'
      } else {
        return '不显示'
      }
    }
  }
}
</script>

<style scoped>

</style>
